<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org" />

    <title>RMagick 0.0.0: class Draw</title>
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
    <meta name="GENERATOR" content="Quanta Plus" />
    <meta name="Copyright" content="Copyright (C) 2006 by Timothy P. Hunter" />
    <link rel="stylesheet" type="text/css" href="css/doc.css" />
    <script type="text/javascript" src="scripts/doc.js"></script>
    <style type="text/css">
      /*<![CDATA[*/

      /* Styles local to this page. */

      /*]]>*/
    </style>
  </head>

  <body>
    <h6 id="header">RMagick 0.0.0 User's Guide and Reference</h6>

    <div class="nav">&laquo;&nbsp;<a href="image3.html">Prev</a> | <a href="index.html">Contents</a> | <a href="struct.html">Next</a>&nbsp;&raquo;</div>

    <h1>class Draw <span class="superclass">&lt; Object</span></h1>

    <div id="toc">
      <h2>Table of Contents</h2>

      <h3>class methods</h3>

      <ul>
        <li><a href="#new">new</a></li>
      </ul>

      <h3>instance methods</h3>

      <div class="toccol">
        <ul>
          <li><a href="#annotate">annotate</a></li>

          <li><a href="#clone">clone</a></li>

          <li><a href="#composite">composite</a></li>
        </ul>
      </div>

      <div class="toccol">
        <ul>
          <li><a href="#draw">draw</a></li>

          <li><a href="#dup">dup</a></li>

          <li>
            <a href="#get_multiline_type_metrics">get_multiline_type_metrics</a>
          </li>
        </ul>
      </div>

      <div class="toccol">
        <ul>
          <li><a href="#get_type_metrics">get_type_metrics</a></li>

          <li><a href="#inspect">inspect</a></li>

          <li><a href="#primitive">primitive</a></li>
        </ul>
      </div>

      <h3>drawing primitive methods</h3>

      <div class="toccol">
        <ul>
          <li><a href="#affine">affine</a></li>

          <li><a href="#alpha">alpha</a></li>

          <li><a href="#arc">arc</a></li>

          <li><a href="#bezier">bezier</a></li>

          <li><a href="#circle">circle</a></li>

          <li><a href="#clip_path">clip_path</a></li>

          <li><a href="#clip_rule">clip_rule</a></li>

          <li><a href="#clip_units">clip_units</a></li>

          <li><a href="#color">color</a></li>

          <li><a href="#composite">composite</a></li>

          <li><a href="#decorate">decorate</a></li>

          <li><a href="#define_clip_path">define_clip_path</a></li>

          <li><a href="#ellipse">ellipse</a></li>

          <li><a href="#encoding">encoding</a></li>

          <li><a href="#fill">fill</a></li>

          <li><a href="#fill_opacity">fill_opacity</a></li>

          <li><a href="#fill_rule">fill_rule</a></li>

          <li><a href="#font">font</a></li>

          <li><a href="#font_family">font_family</a></li>

          <li><a href="#font_stretch">font_stretch</a></li>
        </ul>
      </div>

      <div class="toccol">
        <ul>
          <li><a href="#font_style">font_style</a></li>

          <li><a href="#font_weight">font_weight</a></li>

          <li><a href="#gravity">gravity</a></li>

          <li><a href="#interline_spacing">interline_spacing</a></li>

          <li><a href="#interword_spacing">interword_spacing</a></li>

          <li><a href="#kerning">kerning</a></li>

          <li><a href="#line">line</a></li>

          <li><a href="#matte">matte</a></li>

          <li><a href="#opacity">opacity</a></li>

          <li><a href="#path">path</a></li>

          <li><a href="#pattern">pattern</a></li>

          <li><a href="#point">point</a></li>

          <li><a href="#pointsize">pointsize</a></li>

          <li><a href="#polygon">polygon</a></li>

          <li><a href="#polyline">polyline</a></li>

          <li><a href="#pop">pop</a></li>

          <li><a href="#push">push</a></li>

          <li><a href="#rectangle">rectangle</a></li>

          <li><a href="#rotate">rotate</a></li>
        </ul>
      </div>

      <div class="toccol">
        <ul>
          <li><a href="#roundrectangle">roundrectangle</a></li>

          <li><a href="#scale">scale</a></li>

          <li><a href="#skewx">skewx</a></li>

          <li><a href="#skewy">skewy</a></li>

          <li><a href="#stroke">stroke</a></li>

          <li><a href="#stroke_antialias">stroke_antialias</a></li>

          <li><a href="#stroke_dasharray">stroke_dasharray</a></li>

          <li><a href="#stroke_dashoffset">stroke_dashoffset</a></li>

          <li><a href="#stroke_linecap">stroke_linecap</a></li>

          <li><a href="#stroke_linejoin">stroke_linejoin</a></li>

          <li><a href="#stroke_miterlimit">stroke_miterlimit</a></li>

          <li><a href="#stroke_opacity">stroke_opacity</a></li>

          <li><a href="#stroke_width">stroke_width</a></li>

          <li><a href="#text">text</a></li>

          <li><a href="#text_align">text_align</a></li>

          <li><a href="#text_anchor">text_anchor</a></li>

          <li><a href="#text_antialias">text_antialias</a></li>

          <li><a href="#text_undercolor">text_undercolor</a></li>

          <li><a href="#translate">translate</a></li>
        </ul>
      </div>

      <h3>annotate attributes</h3>

      <div class="toccol">
        <ul>
          <li><a href="#affine_eq">affine</a></li>

          <li><a href="#align_eq">align</a></li>

          <li><a href="#decorate_eq">decorate</a></li>

          <li><a href="#density_eq">density</a></li>

          <li><a href="#encoding_eq">encoding</a></li>

          <li><a href="#fill_eq">fill</a></li>

          <li><a href="#fill_pattern_eq">fill_pattern</a></li>

          <li><a href="#font_eq">font</a></li>
        </ul>
      </div>

      <div class="toccol">
        <ul>
          <li><a href="#font_family_eq">font_family</a></li>

          <li><a href="#font_stretch_eq">font_stretch</a></li>

          <li><a href="#font_style_eq">font_style</a></li>

          <li><a href="#font_weight_eq">font_weight</a></li>

          <li><a href="#gravity_eq">gravity</a></li>

          <li><a href="#interline_spacing_eq">interline_spacing</a></li>

          <li><a href="#interword_spacing_eq">interword_spacing</a></li>

          <li><a href="#kerning_eq">kerning</a></li>
        </ul>
      </div>

      <div class="toccol">
        <ul>
          <li><a href="#pointsize_eq">pointsize</a></li>

          <li><a href="#rotation_eq">rotation</a></li>

          <li><a href="#stroke_eq">stroke</a></li>

          <li><a href="#stroke_pattern_eq">stroke_pattern</a></li>

          <li><a href="#stroke_width_eq">stroke_width</a></li>

          <li><a href="#text_antialias_eq">text_antialias</a></li>

          <li><a href="#tile_eq">tile</a></li>

          <li><a href="#undercolor_eq">undercolor</a></li>
        </ul>
      </div>
    </div>

    <h2 class="methods">class methods</h2>

    <div class="sig">
      <h3 id="new">new</h3>

      <p>
        Draw.new
        <span class="arg">[&nbsp;{ optional parameters }&nbsp;]</span> -&gt;
        <em>draw</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Creates a new Draw object.</p>

      <h4>Arguments</h4>

      <p>
        If you plan to use the <code>annotate</code> method with this object you can initialize the <a href="#attributes">attributes</a> in the associated
        block.
      </p>

      <h4>Returns</h4>
      A new <code>Draw</code> object.

      <h4>Example</h4>
      <pre>
gc = Draw.new
</pre
      >
    </div>

    <h2 class="methods">instance methods</h2>

    <div class="sig">
      <h3 id="annotate">annotate</h3>

      <p>
        <span class="arg">draw.</span>annotate(<span class="arg">img</span>, <span class="arg">width</span>, <span class="arg">height</span>,
        <span class="arg">x</span>, <span class="arg">y</span>, <span class="arg">text</span>)
        <span class="arg">[&nbsp;{ additional parameters }&nbsp;]</span> -&gt;
        <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Annotates a image with text. The text is positioned according to the
        <code>gravity</code> attribute around the rectangle described by the <span class="arg">x</span>, <span class="arg">y</span>,
        <span class="arg">width</span>, and <span class="arg">height</span> arguments. If either of the <span class="arg">width</span> or
        <span class="arg">height</span> arguments are 0, uses the image width-<span class="arg">x</span> and the image height-<span class="arg">y</span>
        to compute the rectangle width and height. The attributes described in
        <a href="#attributes">annotate attributes</a>, below, influence the appearance and position of the text. These attributes may be set in the Draw object
        before calling <code>annotate</code>, or within <code>annotate</code>'s optional <span class="arg">additional parameters</span> block.
      </p>

      <p><em>Note</em>: all of the <code>annotate</code> attributes are set-only.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>img</dt>

        <dd>the image or imagelist to be annotated</dd>

        <dt>width</dt>

        <dd>width of the rectangle within which the text is positioned</dd>

        <dt>height</dt>

        <dd>height of the rectangle within which the text is positioned</dd>

        <dt>x</dt>

        <dd>x offset of the rectangle</dd>

        <dt>y</dt>

        <dd>y offset of the rectangle</dd>

        <dt>text</dt>

        <dd>the text</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>
        This example is an excerpt of
        <a href="javascript:popup('colors.rb.html')" title="Click to see the example script">colors.rb</a>. Many other examples also use <code>annotate</code>.
      </p>
      <pre>
title.annotate(montage, 0,0,0,40, 'Named Colors') { |options|
    options.font_family = 'Helvetica'
    options.fill = 'white'
    options.stroke = 'transparent'
    options.pointsize = 32
    options.font_weight = BoldWeight
    options.gravity = NorthGravity
}
</pre
      >

      <h4>Special characters</h4>

      <p>
        Escape a blank, quote, or apostrophe by preceding it with a backslash ("\"). To include a backslash in the text, use two consecutive backslashes. To
        include a '%' in the text, use '%%'. You can include information about the image by including one or more of the special character sequences shown in
        this table.
      </p>

      <table id="spec_chars_table" summary="annotate special characters" class="simple_table">
        <caption>
          Special characters
        </caption>

        <tr>
          <th>Replaced by</th>

          <th>&nbsp;</th>
        </tr>

        <tr>
          <td>%b</td>

          <td>file size in bytes</td>
        </tr>

        <tr>
          <td>%c</td>

          <td>"comment" property string</td>
        </tr>

        <tr>
          <td>%d</td>

          <td>directory in which the file resides</td>
        </tr>

        <tr>
          <td>%e</td>

          <td>filename extension</td>
        </tr>

        <tr>
          <td>%f</td>

          <td>original filename</td>
        </tr>

        <tr>
          <td>%g</td>

          <td>group number</td>
        </tr>

        <tr>
          <td>%h</td>

          <td>height</td>
        </tr>

        <tr>
          <td>%i</td>

          <td>current filename</td>
        </tr>

        <tr>
          <td>%k</td>

          <td>number of unique colors</td>
        </tr>

        <tr>
          <td>%l</td>

          <td>"label" property string</td>
        </tr>

        <tr>
          <td>%m</td>

          <td>file format</td>
        </tr>

        <tr>
          <td>%n</td>

          <td>number of images in the sequence (for RMagick, this is always 1)</td>
        </tr>

        <tr>
          <td>%o</td>

          <td>output filename</td>
        </tr>

        <tr>
          <td>%p</td>

          <td>page number (for RMagick, this is always 1)</td>
        </tr>

        <tr>
          <td>%q</td>

          <td>depth</td>
        </tr>

        <tr>
          <td>%r</td>

          <td>
            A string of the form "ClasstypeColorspace," for example "DirectClassRGB". If the image's <em>matte</em> attribute is <code>true</code>, appends the
            word "Matte" to the end of the string.
          </td>
        </tr>

        <tr>
          <td>%s</td>

          <td>scene number (always 1)</td>
        </tr>

        <tr>
          <td>%t</td>

          <td>filename without extension</td>
        </tr>

        <tr>
          <td>%u</td>

          <td>unique temporary filename</td>
        </tr>

        <tr>
          <td>%w</td>

          <td>width</td>
        </tr>

        <tr>
          <td>%x</td>

          <td>x resolution</td>
        </tr>

        <tr>
          <td>%y</td>

          <td>y resolution</td>
        </tr>

        <tr>
          <td>%z</td>

          <td>depth</td>
        </tr>
      </table>

      <h4>See also</h4>

      <p>
        This method is also defined in the
        <a href="image1.html#annotate">Image</a> class.
      </p>

      <h4>Magick API</h4>

      <p>AnnotateImage</p>
    </div>

    <div class="sig">
      <h3 id="clone">clone</h3>

      <p><span class="arg">draw</span>.clone -&gt; <em>other_draw</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Same as <a href="#dup">dup</a> except the frozen state of the original is propagated to the copy.</p>

      <h4>Returns</h4>

      <p>A new Draw object.</p>
    </div>

    <div class="sig">
      <h3 id="composite">composite</h3>

      <p>
        <span class="arg">draw</span>.composite(<span class="arg">x</span>, <span class="arg">y</span>, <span class="arg">width</span>,
        <span class="arg">height</span>, <span class="arg">image</span>, [<span class="arg">operator</span>]) -&gt; <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>This method draw the image using <a href="constants.html#CompositeOperator">CompositeOperator</a>.</p>

      <h4>Arguments</h4>
      <dl>
        <dt>x</dt>
        <dt>y</dt>
        <dt>width</dt>
        <dt>height</dt>
        <dt>image</dt>
        <dd>Either an imagelist or a image. If an imagelist, draws on the current image.</dd>

        <dt>operator</dt>
        <dd>Specify one of <a href="constants.html#CompositeOperator">CompositeOperator</a> enum.</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="draw">draw</h3>

      <p>
        <span class="arg">draw</span>.draw(<span class="arg">img</span>) -&gt;
        <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Draws the list of graphic primitives on the specified image. Calling
        <code>draw</code> does not affect the list of primitives. Each time you call <code>draw</code> the primitives will be re-executed from the beginning.
      </p>

      <h4>Arguments</h4>

      <p>Either an imagelist or a image. If an imagelist, draws on the current image.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>See the other examples on this page.</p>

      <h4>Magick API</h4>

      <p>DrawImage</p>
    </div>

    <div class="sig">
      <h3 id="dup">dup</h3>

      <p><span class="arg">draw</span>.dup -&gt; <em>other_draw</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Duplicate a <code>Draw</code> object.</p>

      <h4>Returns</h4>

      <p>An exact copy of the receiver, including the list of drawing primitives.</p>

      <h4>See also</h4>

      <p><a href="#clone">clone</a></p>
    </div>

    <div class="sig">
      <h3 id="get_multiline_type_metrics">get_multiline_type_metrics</h3>

      <p>
        <span class="arg">draw</span>.get_multiline_type_metrics([<span class="arg">image</span>,] <span class="arg">string</span>) -&gt; <em>type_metrics</em>
      </p>
    </div>

    <div class="sig">
      <h3 id="get_type_metrics">get_type_metrics</h3>

      <p><span class="arg">draw</span>.get_type_metrics([<span class="arg">image</span>,] <span class="arg">string</span>) -&gt; <em>type_metrics</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Returns information for a specific string if rendered on a image. Metrics are derived from either the
        <a href="#attributes"> annotate attributes</a> or from the <a href="info.html">image info attributes</a>, but not from any drawing primitive methods.
        The <code>get_multiline_type_metrics</code> method is the same as <code>get_type_metrics</code>, except the former returns the maximum height and width
        for multiple lines of text. (Text lines are separated by "\n" characters.)
      </p>

      <p>The Magick++ documentation for its TypeMetric class provides this useful additional information. (I've changed it a bit to use RMagick names.)</p>

      <blockquote>
        <p class="imquote">
          The TypeMetric class provides the means to pass data from the Draw class's get_type_metric method to the user. It provides information regarding font
          metrics such as ascent, descent, text width, text height, and maximum horizontal advance. The units of these font metrics are in pixels...(T)he
          metrics are dependent on the current Image font (default Ghostscript's "Helvetica"), pointsize (default 12 points), and x/y resolution (default 72
          DPI) settings.
        </p>

        <p class="imquote">
          The pixel units may be converted to points (the standard resolution-independent measure used by the typesetting industry) via the following equation:
        </p>

        <p><code>size_points = (size_pixels * 72)/resolution</code></p>

        <p class="imquote">where resolution is in dots-per-inch (DPI). This means that at the default image resolution, there is one pixel per point.</p>

        <p class="imquote">
          Note that a font's pointsize is only a first-order approximation of the font height (ascender + descender) in points. The relationship between the
          specified pointsize and the rendered font height is determined by the font designer.
        </p>

        <p class="imquote">
          See
          <a href="https://freetype.sourceforge.net/freetype2/docs/glyphs/index.html"> FreeType Glyph Conventions</a>
          for a detailed description of font metrics related issues.
        </p>
      </blockquote>

      <h4>Arguments</h4>

      <dl>
        <dt>image <em>(optional)</em></dt>

        <dd>
          The image on which the string will be rendered. ImageMagick uses the attributes of the image (font name, pointsize, etc.) to compute the metrics. If
          this argument is omitted,
          <code>get_type_metrics</code> substitutes a dummy image with default attributes. The <span class="arg">string</span> argument may not contain any of
          the special characters shown in <a href="#spec_chars_table">this</a> table.
        </dd>

        <dt>string</dt>

        <dd>
          The string to be rendered. If <span class="arg">img</span> is specified, the string may contain special characters that refer to the image attributes.
          See <a href="#spec_chars_table">this</a> table.
        </dd>
      </dl>

      <h4>Returns</h4>

      <p>
        A TypeMetric struct. This structure has the following attributes. (The descriptions are taken from the
        <a href="https://www.imagemagick.org/Magick++/TypeMetric.html">Magick++</a>
        documentation and source code.)
      </p>

      <table summary="type metric attributes" class="simple_table">
        <caption>
          TypeMetric attributes
        </caption>

        <tr>
          <th>Accessor</th>

          <th>Description</th>
        </tr>

        <tr>
          <td>ascent</td>

          <td>Distance in pixels from the text baseline to the highest/upper grid coordinate used to place an outline point. Always a positive value.</td>
        </tr>

        <tr>
          <td>descent</td>

          <td>Distance in pixels from the baseline to the lowest grid coordinate used to place an outline point. Always a negative value.</td>
        </tr>

        <tr>
          <td>width</td>

          <td>Text width in pixels</td>
        </tr>

        <tr>
          <td>height</td>

          <td>Text height in pixels</td>
        </tr>

        <tr>
          <td>max_advance</td>

          <td>Maximum horizontal advance (advance from the beginning of a character to the beginning of the next character) in pixels.</td>
        </tr>
      </table>

      <h4>Example</h4>

      <p>
        This example shows the details of a TypeMetric struct.
        <a href="javascript:popup('get_type_metrics.rb.html')" title="Click to see the example script"
          ><img src="ex/get_type_metrics.gif" alt="get_type_metrics example"
        /></a>
      </p>

      <p>
        This example uses the <code>width</code> and <code>height</code> values returned by <code>get_multiline_type_metrics</code> to draw a border around the
        text lines.
        <a href="javascript:popup('get_multiline_type_metrics.rb.html')" title="Click to see the example script"
          ><img src="ex/get_multiline_type_metrics.gif" alt="get_multiline_type_metrics example"
        /></a>
      </p>

      <h4>Magick API</h4>

      <p>GetTypeMetrics, GetMultilineTypeMetrics</p>
    </div>

    <div class="sig">
      <h3 id="inspect">inspect</h3>

      <p><span class="arg">draw</span>.inspect -&gt; <em>string</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Returns the list of primitives that have been added to the
        <code>draw</code> object. This is very handy for debugging.
      </p>

      <h4>Example</h4>
      <pre>
draw.inspect &raquo;
   "stroke red
    fill transparent
    rectangle 20,20 380,180
    line 200,20 200,180
    line 20,100 380,100
    stroke transparent
    fill black"
</pre
      >
    </div>

    <div class="sig">
      <h3 id="primitive">primitive</h3>

      <p><span class="arg">draw</span>.primitive(<span class="arg">primitive</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Add a drawing primitive to the list of primitives in the Draw object.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>primitive</dt>
        <dd>String that it is a drawing primitive to add.</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <h2 class="methods">drawing primitive methods</h2>

    <div class="sig">
      <h3 id="affine">affine</h3>

      <p><span class="arg">draw</span>.affine(<span class="arg">sx, rx, ry, sy, tx, ty</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Transforms the coordinate system by a 3x3 transformation matrix. See
        <a href="https://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace"> Coordinate system transformations</a>
        in the <cite>Scalable Vector Graphics (SVG) 1.1 Specification</cite>.
      </p>

      <h4>Arguments</h4>

      <dl>
        <dt>sx, sy</dt>

        <dd>The amount of scaling in the <em>x</em> and <em>y</em> directions</dd>

        <dt>rx, ry</dt>

        <dd>The rotation in the <em>x</em> and <em>y</em> directions, in radians</dd>

        <dt>tx, ty</dt>

        <dd>The translation distances in the <em>x</em> and <em>y</em> directions, in pixels</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>
        This example changes the default coordinate system to the standard Cartesian coordinate system: the x-axis points rightward and the y-axis points up.
      </p>

      <p><code>gc.affine(1, 0, 0, -1, 0, max_y)</code></p>

      <p>
        <a href="javascript:popup('affine.rb.html')" title="Click to see the example script"><img src="ex/affine.gif" alt="affine example" /></a>
      </p>

      <h4>See also</h4>
      <a href="#rotate">rotate</a>, <a href="#scale">scale</a>,
      <a href="#translate">translate</a>
    </div>

    <div class="sig">
      <h3 id="alpha">alpha</h3>

      <p><span class="arg">draw</span>.alpha(<span class="arg">x, y, method</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Set alpha (make transparent) in image according to the specified colorization rule.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>x, y</dt>

        <dd>The point in the <em>x</em> and <em>y</em> to start filling color</dd>

        <dt>method</dt>

        <dd>
          A <a href="constants.html#PaintMethod">PaintMethod</a> constant. If you use the <code>FillToBorderMethod</code>, assign the border color with the
          <code>Draw#border_color=</code> attribute before calling <a href="#draw">draw</a>.
        </dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>
      <pre>
  draw.alpha(x, y, FillToBorderMethod)
</pre
      >
    </div>

    <div class="sig">
      <h3 id="arc">arc</h3>

      <p><span class="arg">draw</span>.arc(<span class="arg">start_x, start_y, end_x, end_y, start_degrees, end_degrees</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Draws an arc within a rectangle.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>start_x, start_y</dt>

        <dd>one corner of the bounding rectangle</dd>

        <dt>end_x, end_y</dt>

        <dd>the opposite corner of the bounding rectangle</dd>

        <dt>start_degrees</dt>

        <dd>where to start drawing the arc</dd>

        <dt>end_degrees</dt>

        <dd>where the arc ends</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p><code>gc.arc(40, 50, 250, 180, 0, 270)</code></p>

      <p>
        <a href="javascript:popup('arc.rb.html')" title="Click to see the example script"><img src="ex/arc.gif" alt="arc example" /></a>
      </p>

      <h4>See also</h4>
      <a href="#ellipse">ellipse</a>,
      <a href="#path">the SVG elliptical arc commands (A and a)</a>
    </div>

    <div class="sig">
      <h3 id="bezier">bezier</h3>

      <p>
        <span class="arg">draw</span>.bezier(<span class="arg">x1</span>, <span class="arg">y1</span>, <span class="arg">cx1</span>,
        <span class="arg">cy1</span>, <span class="arg">cx2</span>, <span class="arg">cy2</span>, <span class="arg">x2</span>, <span class="arg">y2</span>...)
        -&gt; <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Draw a cubic Bezier curve.</p>

      <h4>Arguments</h4>

      <p>
        The arguments are pairs of points. At least 4 pairs must be specified. Each point <span class="arg">xn</span>, <span class="arg">yn</span> on the curve
        is associated with a control point <span class="arg">cxn</span>, <span class="arg">cyn</span>. The first point, <span class="arg">x1</span>,
        <span class="arg">y1</span>, is the starting point. The last point, <span class="arg">xn</span>, <span class="arg">yn</span>, is the ending point. Other
        point/control point pairs specify intermediate points on a polybezier curve.
      </p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Examples</h4>

      <p>
        The following examples are taken from the
        <a href="https://www.w3.org/TR/SVG/paths.html">Paths</a> section of the <cite>Scalable Vector Graphics (SVG) 1.1 Specification</cite>.
      </p>

      <h4>Example 1</h4>

      <p><code>gc.bezier(20,120, 20,20, 320,20, 320,120)</code></p>

      <p>
        <a href="javascript:popup('cbezier1.rb.html')"><img src="ex/cbezier1.gif" alt="bezier example 1" title="Click to see the example script" /></a>
      </p>

      <h4>Example 2</h4>

      <p><code>gc.bezier(25,125, 100,25, 400,25, 325,125)</code></p>

      <p>
        <a href="javascript:popup('cbezier2.rb.html')"><img src="ex/cbezier2.gif" alt="bezier example 2" title="Click to see the example script" /></a>
      </p>

      <h4>Example 3</h4>

      <p><code>gc.bezier(100,150, 25,50, 475,50, 400,150)</code></p>

      <p>
        <a href="javascript:popup('cbezier3.rb.html')"><img src="ex/cbezier3.gif" alt="bezier example 3" title="Click to see the example script" /></a>
      </p>

      <h4>Example 4</h4>

      <p><code>gc.bezier(20,180, 20,30, 320,330, 320,180)</code></p>

      <p>
        <a href="javascript:popup('cbezier4.rb.html')"><img src="ex/cbezier4.gif" alt="bezier example 4" title="Click to see the example script" /></a>
      </p>

      <h4>Example 5</h4>

      <p><code>gc.bezier(20,120, 95,20, 245,20, 320,120)</code></p>

      <p>
        <a href="javascript:popup('cbezier5.rb.html')"><img src="ex/cbezier5.gif" alt="bezier example 5" title="Click to see the example script" /></a>
      </p>

      <h4>Example 6</h4>

      <p>
        <code>gc.bezier(50,150, 50,50, 200,50, 200,150, 200,250, 350,250, 350,150)</code>
      </p>

      <p>
        <a href="javascript:popup('cbezier6.rb.html')"><img src="ex/cbezier6.gif" alt="bezier example 6" title="Click to see the example script" /></a>
      </p>
    </div>

    <div class="sig">
      <h3 id="circle">circle</h3>

      <p><span class="arg">draw</span>.circle(<span class="arg">origin_x, origin_y, perim_x, perim_y</span>) -&gt; <em>self</em></p>
    </div>

    <p>self</p>

    <div class="desc">
      <h4>Description</h4>

      <p>Draw a circle.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>origin_x, origin_y</dt>

        <dd>The center of the circle.</dd>

        <dt>perim_x, perim_y</dt>

        <dd>A point on the perimeter of the circle.</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p><code>gc.circle(125,125, 25,125)</code></p>

      <p>
        <a href="javascript:popup('circle.rb.html')"><img src="ex/circle.gif" alt="circle example" title="Click to see the example script" /></a>
      </p>
    </div>

    <div class="sig">
      <h3 id="clip_path">clip_path</h3>

      <p><span class="arg">draw</span>.clip_path(<span class="arg">pathname</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p class="imquote">
        Draws the clip path on the image mask. The clip path defines a clipping area, where only the contained area will be drawn upon. Areas outside of the
        clipping area are masked.
      </p>

      <p>
        Before using a clip-path, you must create it using the
        <a href="#define_clip_path">define_clip_path</a> method. You must precede <code>clip_path</code> with <a href="#push">push</a> and terminate the
        primitives that draw within the clip path with <a href="#pop">pop</a>. For example,
      </p>
      <pre>
gc.push
gc.clip_path('mypath')
# drawing primitives within the clip path
gc.pop
gc.draw
</pre
      >

      <p>Also see the example below.</p>

      <h4>Arguments</h4>

      <p>The name of the clip path.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>In this example, the picture of the girl is drawn onto the canvas using a star-shaped clipping path.</p>

      <p>
        <a href="javascript:popup('clip_path.rb.html')" id="clip_path_ex" name="clip_path_ex"
          ><img src="ex/clip_path.gif" alt="clip_path example" title="Click to see the example script"
        /></a>
      </p>

      <h4>See also</h4>
      <a href="#define_clip_path">define_clip_path</a>
    </div>

    <div class="sig">
      <h3 id="clip_rule">clip_rule</h3>

      <p><span class="arg">draw</span>.clip_rule(<code>"evenodd"</code> or <code>"nonzero"</code>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Specify how to determine if a point on the image is inside clipping region. See
        <a href="https://www.w3.org/TR/SVG/painting.html#FillRuleProperty"
          ><code> the <b>'fill-rule'</b> property</code></a
        >
        in the
        <cite>Scalable Vector Graphics (SVG) 1.1 Specification</cite>
        for a complete description and examples.
      </p>

      <h4>Arguments</h4>

      <p>Either "evenodd" or "nonzero".</p>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="clip_units">clip_units</h3>

      <p>
        <span class="arg">draw</span>.clip_units(<code>"userSpace"</code> <span class="arg">or</span> <code>"userSpaceOnUse"</code> or
        <code>"objectSpace"</code>) -&gt; <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Defines the coordinate space within the clipping region. See
        <a href="https://www.w3.org/TR/SVG/masking.html#EstablishingANewClippingPath"> Establishing a New Clipping Path</a>
        in the <cite>Scalable Vector Graphics (SVG) 1.1 Specification</cite> for a complete description and examples.
      </p>

      <h4>Arguments</h4>

      <p>Either "userSpace", "userSpaceOnUse", or "objectSpace".</p>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="color">color</h3>

      <p>
        <span class="arg">draw</span>.color(<span class="arg">x</span>, <span class="arg">y</span>, <span class="arg">paint_method</span>) -&gt;
        <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Set color in image according to the specified
        <a href="constants.html#PaintMethod">PaintMethod</a> constant.
      </p>

      <h4>Arguments</h4>

      <dl>
        <dt>x, y</dt>

        <dd>The point in the <em>x</em> and <em>y</em> to start filling color</dd>

        <dt>method</dt>

        <dd>
          A <a href="constants.html#PaintMethod">PaintMethod</a> constant. If you use the <code>FillToBorderMethod</code>, assign the border color with the
          <code>Draw#border_color=</code> attribute before calling <a href="#draw">draw</a>.
        </dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>
      <pre>
  draw.border_color = 'black'
  draw.color(x, y, FillToBorderMethod)
</pre
      >

      <h4>See Also</h4>

      <p><a href="#matte">matte</a></p>
    </div>

    <div class="sig">
      <h3 id="composite">composite</h3>

      <p>
        <span class="arg">draw</span>.composite(<span class="arg">x</span>, <span class="arg">y</span>, <span class="arg">width</span>,
        <span class="arg">height</span>, <span class="arg">composite_image</span>, <span class="arg">op</span>=<code>OverCompositeOp</code>) -&gt;
        <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Composite <span class="arg">composite_image</span> with the receiver image.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>x, y</dt>

        <dd>The offset of <span class="arg">composite_image</span> relative to the receiver image.</dd>

        <dt>width, height</dt>

        <dd>Scale the <span class="arg">composite_image</span> to this size. If either value is 0, <span class="arg">composite_image</span> is not scaled.</dd>

        <dt>composite_image</dt>

        <dd>Either an imagelist or a image. If an imagelist, uses the current image.</dd>

        <dt>op</dt>

        <dd>
          A
          <a href="constants.html#CompositeOperator">CompositeOperator</a>
          constant.
        </dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example 1</h4>

      <p>
        <a href="javascript:popup('drawcomp.rb.html')"><img src="ex/drawcomp1.gif" alt="composite example 1" title="Click to see the example script" /></a>
      </p>

      <h4>Example 2</h4>

      <p>
        <a href="javascript:popup('drawcomp.rb.html')"><img src="ex/drawcomp2.gif" alt="composite example 2" title="Click to see the example script" /></a>
      </p>

      <h4>See also</h4>

      <p><a href="image1.html#composite">composite</a></p>
    </div>

    <div class="sig">
      <h3 id="decorate">decorate</h3>

      <p><span class="arg">draw</span>.decorate(<span class="arg">decoration</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify text decoration.</p>

      <h4>Arguments</h4>

      <p>A <a href="constants.html#DecorationType">DecorationType</a> constant.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>
      <pre>
draw.decorate(LineThroughDecoration)
</pre
      >
    </div>

    <div class="sig">
      <h3 id="define_clip_path">define_clip_path</h3>

      <p><span class="arg">draw</span>.define_clip_path(<span class="arg">string</span>) { <span class="arg">block</span> } -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Define a clip-path. Within <span class="arg">block</span>, call other drawing primitive methods (<code>rectangle</code>, <code>polygon</code>,
        <code>text</code>, etc.) to define the clip-path. The union of all the primitives (excluding the effects of rendering methods such as
        <code>stroke_width</code>, etc.) is the clip-path. After the clip-path is invoked by the <a href="#clip_path">clip-path</a> method, anything drawn on
        the image inside the clip-path will appear. Anything drawn outside the clip-path will be hidden. (See <a href="#clip_rule">clip_rule</a> for a
        definition of how ImageMagick decides what is "inside" and what is "outside" of the clip-path.)
      </p>

      <h4>Arguments</h4>

      <p>
        The name of the clip-path. This is the name that is specified in the
        <code>clip_path</code> method.
      </p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>
      See <a href="#clip_path">clip_path</a>.
    </div>

    <div class="sig">
      <h3 id="ellipse">ellipse</h3>

      <p>
        draw.ellipse(<span class="arg">origin_x</span>, <span class="arg">origin_y</span>, <span class="arg">width</span>, <span class="arg">height</span>,
        <span class="arg">arc_start</span>, <span class="arg">arc_end</span>) -&gt; <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Draw an ellipse.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>origin_x, origin_y</dt>

        <dd>The center of the ellipse</dd>

        <dt>width, height</dt>

        <dd>The horizontal and vertical radii</dd>

        <dt>arc_start</dt>

        <dd>Where to start the ellipse, in degrees. 0 degrees is at 3 o'clock.</dd>

        <dt>arc_end</dt>

        <dd>Where to end the ellipse, in degrees</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p><code>draw.ellipse(180,125, 150,75, 0, 270)</code></p>

      <p>
        <a href="javascript:popup('ellipse.rb.html')"><img src="ex/ellipse.gif" alt="ellipse example" title="Click to see the example script" /></a>
      </p>

      <h4>See also</h4>
      <a href="#arc">arc</a>, <a href="#circle">circle</a>,
      <a href="#path">path</a>
    </div>

    <div class="sig">
      <h3 id="encoding">encoding</h3>

      <p><span class="arg">draw</span>.encoding(<span class="arg">string</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify the font encoding.</p>

      <h4>Arguments</h4>

      <p>See the ImageMagick documentation for the <code>-encoding</code> option to the <code>mogrify</code> command</p>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="fill">fill</h3>

      <p><span class="arg">draw</span>.fill(<span class="arg">string</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify the color or pattern with which graphical elements are filled.</p>

      <h4>Arguments</h4>

      <p>A <a href="imusage.html#color_names">color name</a> or <a href="#pattern">pattern</a> name.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>
      <pre>
  draw.fill('red')
</pre
      >

      <h4>Aliases</h4>

      <p><code>fill_color</code>, <code>fill_pattern</code></p>
    </div>

    <div class="sig">
      <h3 id="fill_opacity">fill_opacity</h3>

      <p><span class="arg">draw</span>.fill_opacity(<span class="arg">float</span> or <em>string</em>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify the fill opacity.</p>

      <h4>Arguments</h4>

      <p>A number between 0 and 1, inclusive, or a percentage represented as a string, i.e. '30%'. The argument 0.3 is the same as '30%'.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>See the example for <a href="#opacity">opacity</a>.</p>

      <h4>See also</h4>
      <a href="#opacity">opacity</a>,
      <a href="#stroke_opacity">stroke_opacity</a>
    </div>

    <div class="sig">
      <h3 id="fill_rule">fill_rule</h3>

      <p><span class="arg">draw</span>.fill_rule(<code>"evenodd"</code> or <code>"nonzero"</code>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Specify how to determine if a point on the image is inside a shape. See
        <a href="https://www.w3.org/TR/SVG/painting.html#FillRuleProperty"
          ><code> the <b>'fill-rule'</b> property</code></a
        >
        in the
        <cite>Scalable Vector Graphics (SVG) 1.1 Specification</cite>
        for a complete description and examples.
      </p>

      <h4>Arguments</h4>

      <p>Either "evenodd" or "nonzero".</p>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="font">font</h3>

      <p><span class="arg">draw</span>.font(<span class="arg">string</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify the font to draw text with.</p>

      <h4>Arguments</h4>

      <p>
        The font name or filename.
        <span class="imquote"
          >You can tag a font to specify whether it is a Postscript, Truetype, or OPTION1 font. For example, Arial.ttf is a Truetype font, ps:helvetica is
          Postscript, and x:fixed is OPTION1.</span
        >
      </p>

      <p>
        The font name can be a complete filename such as
        <code>"/mnt/windows/windows/fonts/Arial.ttf"</code>. The font name can also be a fully qualified X font name such as
        <code>"-urw-times-medium-i-normal--0-0-0-0-p-0-iso8859-13"</code>.
      </p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>See also</h4>
      <a href="#font_family">font_family</a>
    </div>

    <div class="sig">
      <h3 id="font_family">font_family</h3>

      <p><span class="arg">draw</span>.font_family(<span class="arg">string</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify the font family.</p>

      <h4>Arguments</h4>

      <p>A font family name such as "arial" or "helvetica".</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>See the example for <a href="#text">text</a>.</p>
    </div>

    <div class="sig">
      <h3 id="font_stretch">font_stretch</h3>

      <p><span class="arg">draw</span>.font_stretch(<span class="arg">stretch</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify the spacing between text characters.</p>

      <h4>Arguments</h4>

      <p>A <a href="constants.html#StretchType">StretchType</a> constant.</p>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="font_style">font_style</h3>

      <p><span class="arg">draw</span>.font_style(<span class="arg">style</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify the font style, i.e. italic, oblique, or normal.</p>

      <h4>Arguments</h4>

      <p>A <a href="constants.html#StyleType">StyleType</a> constant.</p>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="font_weight">font_weight</h3>

      <p><span class="arg">draw</span>.font_weight(<span class="arg">weight</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify the font weight. For example, "bold" or "normal".</p>

      <h4>Arguments</h4>

      <p>A <a href="constants.html#WeightType">WeightType</a> constant, or one of the numbers 100, 200, 300, 400, 500, 600, 700, 800, or 900.</p>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="gravity">gravity</h3>

      <p><span class="arg">draw</span>.gravity(<span class="arg">gravity</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Specify how the text is positioned. The default is
        <code>NorthWestGravity</code>.
      </p>

      <h4>Arguments</h4>

      <p>A <a href="constants.html#GravityType">GravityType</a> constant.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>
        <a href="javascript:popup('grav.rb.html')"><img src="ex/grav.gif" alt="gravity example" title="Click to see the example script" /></a>
      </p>

      <h4>See also</h4>

      <p><a href="#text_align">text_align</a></p>
    </div>

    <div class="sig">
      <h3 id="interline_spacing">interline_spacing</h3>

      <p><span class="arg">draw</span>.interline_spacing(<span class="arg">space</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Modify the spacing between lines when text has multiple lines.</p>

      <h4>Argument</h4>

      <p>
        A numeric value. If positive, inserts additional space between lines. If negative, removes space between lines. The amount of space inserted or removed
        depends on the font.
      </p>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="interword_spacing">interword_spacing</h3>

      <p><span class="arg">draw</span>.interword_spacing(<span class="arg">space</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Modify the spacing between words in text.</p>

      <h4>Argument</h4>

      <p>
        A numeric value. If positive, inserts additional space between words. If negative, removes space between words. The amount of space inserted or removed
        depends on the font.
      </p>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="kerning">kerning</h3>

      <p><span class="arg">draw</span>.kerning(<span class="arg">space</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Modify the spacing between letters in text.</p>

      <h4>Argument</h4>

      <p>
        A numeric value. If positive, inserts additional space between letters. If negative, removes space between letters. The amount of space inserted or
        removed depends on the font but is usually measured in pixels. That is, the following call adds <em>about</em> 5 pixels between each letter.
      </p>
      <pre>
gc.kerning(5)
</pre
      >

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="line">line</h3>

      <p>
        <span class="arg">draw</span>.line(<span class="arg">here_x</span>, <span class="arg">here_y</span>, <span class="arg">there_x</span>,
        <span class="arg">there_y</span>) -&gt; <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Draw a line from <em>here</em> to <em>there</em>.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>here_x, here_y</dt>

        <dd>The starting point.</dd>

        <dt>there_x, there_y</dt>

        <dd>The ending point.</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>
        <code
          >gc.line(50,50, 50,200)<br />
          gc.line(50,200, 200,200)<br />
          gc.line(200,200, 50,50)</code
        >
      </p>

      <p>
        <a href="javascript:popup('line.rb.html')"><img src="ex/line.gif" alt="line example" title="Click to see the example script" /></a>
      </p>
    </div>

    <div class="sig">
      <h3 id="matte">matte</h3>

      <p>
        <span class="arg">draw</span>.matte(<span class="arg">x</span>,<span class="arg">y</span>, <span class="arg">paint_method</span>) -&gt; <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Make the image transparent according to the specified PaintMethod constant.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>x, y</dt>

        <dd>Point in image to use, along with the PaintMethod constant, to set transparent pixels in the image.</dd>

        <dt>paint_method</dt>

        <dd>
          One of the following
          <a href="constants.html#PaintMethod">PaintMethod</a> constants:

          <dl>
            <dt>PointMethod</dt>

            <dd>Make the pixel at <em>(x,y)</em> transparent.</dd>

            <dt>ReplaceMethod</dt>

            <dd>
              Make all pixels that are the same color as the pixel at
              <em>(x,y)</em> transparent.
            </dd>

            <dt>FloodfillMethod</dt>

            <dd>
              Make all the pixels surrounding the pixel at
              <em>(x,y)</em> transparent, until encountering pixels that fail to match color at <em>(x,y)</em>.
            </dd>

            <dt>FillToBorderMethod</dt>

            <dd>
              Make all the pixels surrounding the pixel at
              <em>(x,y)</em> transparent, until encountering pixels that match the border color. Assign the border color with the
              <code>Draw#border_color=</code> attribute before calling <a href="#draw">draw</a>.
            </dd>

            <dt>ResetMethod</dt>

            <dd>Make the entire image transparent.</dd>
          </dl>
        </dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>See also</h4>
      <a href="#color">color</a><a href="image2.html#matte_point">matte_point</a>, <a href="image2.html#matte_replace">matte_replace</a>,
      <a href="image2.html#matte_floodfill">matte_floodfill</a>, <a href="image2.html#matte_fill_to_border">matte_fill_to_border</a>,
      <a href="image2.html#opaque">opaque</a>,
      <a href="image3.html#transparent">transparent</a>
    </div>

    <div class="sig">
      <h3 id="opacity">opacity</h3>

      <p><span class="arg">draw</span>.opacity(<span class="arg">opacity</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify the fill and stroke opacities.</p>

      <h4>Arguments</h4>

      <p>
        Either a number between 0 and 1, or a percentage represented as a string, i.e. "25%". The string argument "25%" is the same as the numeric argument
        0.25. Both the fill and stroke opacities are set to the specified value.
      </p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>This example demonstrates 4 levels of opacity.</p>

      <p>
        <a href="javascript:popup('opacity.rb.html')"><img src="ex/opacity.png" alt="opacity example" title="Click to see the example script" /></a>
      </p>

      <h4>See also</h4>

      <p>
        <a href="#fill_opacity">fill_opacity</a>,
        <a href="#stroke_opacity">stroke_opacity</a>
      </p>
    </div>

    <div class="sig">
      <h3 id="path">path</h3>

      <p><span class="arg">draw</span>.path(<span class="arg">string</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Draw using SVG-compatible path drawing commands. See "<a href="https://www.w3.org/TR/SVG/paths.html">Paths</a>" in the
        <cite>Scalable Vector Graphics (SVG) 1.1 Specification</cite>.
      </p>

      <h4>Arguments</h4>

      <p>
        A string containing SVG <em>moveto</em>, <em>line</em>, <em>curve</em>, <em>arc</em>, or <em>closepath</em>
        instructions. The string is equivalent to the
        <strong>d</strong> attribute in an SVG <strong>'path'</strong> element.
      </p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>
        These examples are all taken from the
        <a href="https://www.w3.org/TR/SVG/paths.html">SVG path</a> examples.
      </p>

      <h4>Example 1 - Arcs</h4>

      <p>
        <code
          >gc.path('M110,100 h-75 a75,75 0 1,0 75,-75 z')<br />
          gc.path('M97.5,87.5 v-75 a75,75 0 0,0 -75,75 z')</code
        >
      </p>

      <p>
        <a href="javascript:popup('arcpath.rb.html')"><img src="ex/arcpath.gif" alt="path example 1" title="Click to see the example script" /></a>
      </p>

      <h4>Example 2 - Quadratic bezier</h4>

      <p><code>gc.path("M20,150 Q120,25 220,150 T420,150")</code></p>

      <p>
        <a href="javascript:popup('qbezierpath.rb.html')"><img src="ex/qbezierpath.gif" alt="path example 2" title="Click to see the example script" /></a>
      </p>

      <h4>Example 3 - Cubic bezier</h4>

      <p>
        <code>gc.path("M20,120 C20,20 170,20 170,120 S320,220 320,120")</code>
      </p>

      <p>
        <a href="javascript:popup('path.rb.html')"><img src="ex/path.gif" alt="path example 3" title="Click to see the example script" /></a>
      </p>
    </div>

    <div class="sig">
      <h3 id="pattern">pattern</h3>

      <p>
        <span class="arg">draw</span>.pattern(<span class="arg">name</span>, <span class="arg">x</span>, <span class="arg">y</span>,
        <span class="arg">width</span>, <span class="arg">height</span>) { pattern primitives } -&gt; <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Define a pattern that can be used as the <a href="#fill">fill</a> or <a href="#stroke">stroke</a> pattern.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>name</dt>

        <dd>
          The name of the pattern. The pattern is used in a
          <a href="#fill">fill</a> or <a href="#stroke">stroke</a> method by specifying its name.
        </dd>

        <dt>x, y, width, height</dt>

        <dd>
          Define how the pattern is tiled. The pattern rectangles start at (<span class="arg">x</span> + <em>m</em>*<span class="arg">width</span>,
          <span class="arg">y</span>+<em>n</em>*<span class="arg">height</span>) for the values of <em>n</em> and <em>m</em> as necessary to fill the space.
        </dd>

        <dt>pattern primitives</dt>

        <dd>The method calls that draw the pattern.</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example 1</h4>

      <p>
        <a href="javascript:popup('pattern1.rb.html')"><img src="ex/pattern1.gif" alt="pattern example 1" title="Click to see the example script" /></a>
      </p>

      <h4>Example 2</h4>

      <p>
        <a href="javascript:popup('pattern2.rb.html')"><img src="ex/pattern2.gif" alt="pattern example 2" title="Click to see the example script" /></a>
      </p>

      <h4>See also</h4>

      <p><a href="#fill">fill</a>, <a href="#stroke">stroke</a></p>
    </div>

    <div class="sig">
      <h3 id="point">point</h3>

      <p><span class="arg">draw</span>.point(<span class="arg">x</span>, <span class="arg">y</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Set the pixel at <span class="arg">x</span>,<span class="arg">y</span> to the <a href="#fill">fill</a> color.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>x, y</dt>

        <dd>The pixel location</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="pointsize">pointsize</h3>

      <p><span class="arg">draw</span>.pointsize(<span class="arg">integer</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Set the font size in points. The default is 12.</p>

      <h4>Arguments</h4>

      <p>See the example for <a href="#text">text</a>.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Alias</h4>

      <p>font_size</p>
    </div>

    <div class="sig">
      <h3 id="polygon">polygon</h3>

      <p>
        <span class="arg">draw</span>.polygon(<span class="arg">x1</span>, <span class="arg">y1</span>,...,<span class="arg">xN</span>,
        <span class="arg">yN</span>) -&gt; <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Draw a polygon.</p>

      <h4>Arguments</h4>

      <p>
        The arguments are a sequence of 2 or more points. If the last point is not the same as the first, the polygon is closed by drawing a line from the last
        point to the first.
      </p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>
        This example is taken from the
        <a href="https://www.w3.org/TR/SVG/shapes.html#PolygonElement">The 'polygon' element</a>
        in the <cite>Scalable Vector Graphics (SVG) 1.1 Specification</cite>
      </p>
      <a href="javascript:popup('polygon.rb.html')"><img src="ex/polygon.gif" alt="polygon example" title="Click to see the example script" /></a>

      <h4>See also</h4>
      <a href="#path">path</a>
    </div>

    <div class="sig">
      <h3 id="polyline">polyline</h3>

      <p>
        <span class="arg">draw</span>.polyline(<span class="arg">x1</span>, <span class="arg">y1</span>,...,<span class="arg">xN</span>,
        <span class="arg">yN</span>) -&gt; <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Draw a polyline. Unlike a polygon, a polyline is not automatically closed.</p>

      <h4>Arguments</h4>

      <p>A sequence of 2 or more points.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>
        This example is taken from the
        <a href="https://www.w3.org/TR/SVG/shapes.html#PolylineElement">The 'polyline' element</a>
        in the <cite>Scalable Vector Graphics (SVG) 1.1 Specification</cite>
      </p>

      <p>
        <a href="javascript:popup('polyline.rb.html')"><img src="ex/polyline.gif" alt="polyline example" title="Click to see the example script" /></a>
      </p>
    </div>

    <div class="sig">
      <h3 id="pop">pop</h3>

      <p><span class="arg">draw</span>.pop -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Restore the graphics context to the state it was in when
        <a href="#push">push</a> was called last.
      </p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>See also</h4>
      <a href="#push">push</a>
    </div>

    <div class="sig">
      <h3 id="push">push</h3>

      <p><span class="arg">draw</span>.push -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Save the current state of the graphics context, including the attribute settings and the current set of primitives. Use the
        <a href="#pop">pop</a> primitive to restore the state.
      </p>

      <p>
        <em>Note:</em> The <code>push</code> and <code>pop</code> methods are probably not as useful in RMagick as they are in C language ImageMagick programs,
        since it is easy to create separate draw objects, each with its own set of properties and primitives.
      </p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>See also</h4>
      <a href="#pop">pop</a>
    </div>

    <div class="sig">
      <h3 id="rectangle">rectangle</h3>

      <p>
        <span class="arg">draw</span>.rectangle(<span class="arg">x1</span>, <span class="arg">y1</span>, <span class="arg">x2</span>,
        <span class="arg">y2</span>) -&gt; <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Draw a rectangle.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>x1, y1</dt>

        <dd>The upper left hand corner of the rectangle</dd>

        <dt>x2, y2</dt>

        <dd>The lower right hand corner of the rectangle</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p><code>gc.rectangle(20,20, 280,180)</code></p>
      <a href="javascript:popup('rectangle.rb.html')"><img src="ex/rectangle.gif" alt="rectangle example" title="Click to see the example script" /></a>
    </div>

    <div class="sig">
      <h3 id="rotate">rotate</h3>

      <p><span class="arg">draw</span>.rotate(<span class="arg">degrees</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify a rotation transformation to the coordinate space. The default is 0.</p>

      <h4>Arguments</h4>

      <p>The amount of rotation, in degrees. The angle of rotation is clockwise, so 90&deg; is South.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p><code>gc.rotate(45)</code></p>

      <p>
        <a href="javascript:popup('rotate.rb.html')"><img src="ex/rotate.gif" alt="rotate example" title="Click to see the example script" /></a>
      </p>

      <h4>See also</h4>
      <a href="#affine">affine</a>
    </div>

    <div class="sig">
      <h3 id="roundrectangle">roundrectangle</h3>

      <p>
        <span class="arg">draw</span>.roundrectangle(<span class="arg">x1</span>, <span class="arg">y1</span>, <span class="arg">x2</span>,
        <span class="arg">y2</span>, <span class="arg">cw</span>, <span class="arg">ch</span>) -&gt; <em>self</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Draw a rectangle with rounded corners.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>x1, y1</dt>

        <dd>The upper left hand corner of the rectangle</dd>

        <dt>x2, y2</dt>

        <dd>The lower right hand corner of the rectangle</dd>

        <dt>cw, ch</dt>

        <dd>The corner width and height</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p><code>gc.roundrectangle(20,20, 280,180, 8, 8)</code></p>

      <p>
        <a href="javascript:popup('roundrect.rb.html')"><img src="ex/roundrect.gif" alt="roundrectangle example" title="Click to see the example script" /></a>
      </p>
    </div>

    <div class="sig">
      <h3 id="scale">scale</h3>

      <p><span class="arg">draw</span>.scale(<span class="arg">sx</span>, <span class="arg">sy</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Define a scale transformation to the coordinate space. The default scale is (1.0, 1.0).</p>

      <h4>Arguments</h4>

      <dl>
        <dt>sx, sy</dt>

        <dd>The amount of scaling in the x and y dimensions.</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>See also</h4>
      <a href="#affine">affine</a>
    </div>

    <div class="sig">
      <h3 id="skewx">skewx</h3>

      <p><span class="arg">draw</span>.skewx(<span class="arg">float</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Define a skew transformation along the x-axis.</p>

      <h4>Arguments</h4>

      <p>The amount of skew, in degrees.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p><code>gc.skewx(30)</code></p>

      <p>
        <a href="javascript:popup('skewx.rb.html')"><img src="ex/skewx.gif" alt="skewx example" title="Click to see the example script" /></a>
      </p>

      <h4>See also</h4>
      <a href="#skewy">skewy</a>, <a href="#affine">affine</a>,
      <a href="#rotate">rotate</a>
    </div>

    <div class="sig">
      <h3 id="skewy">skewy</h3>

      <p><span class="arg">draw</span>.skewy(<span class="arg">float</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Define a skew transformation along the y-axis.</p>

      <h4>Arguments</h4>

      <p>The amount of skew, in degrees.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p><code>gc.skewy(30)</code></p>

      <p>
        <a href="javascript:popup('skewy.rb.html')"><img src="ex/skewy.gif" alt="skewy example" title="Click to see the example script" /></a>
      </p>

      <h4>See also</h4>
      <a href="#affine">affine</a>, <a href="#skewx">skewx</a>,
      <a href="#rotate">rotate</a>
    </div>

    <div class="sig">
      <h3 id="stroke">stroke</h3>

      <p><span class="arg">draw</span>.stroke(<span class="arg">string</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify the stroke color or pattern.</p>

      <h4>Arguments</h4>

      <p>A <a href="imusage.html#color_names">color name</a> or <a href="#pattern">pattern</a> name.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Aliases</h4>
      <code>stroke_color</code>,
      <code>stroke_pattern</code>
    </div>

    <div class="sig">
      <h3 id="stroke_antialias">stroke_antialias</h3>

      <p><span class="arg">draw</span>.stroke_antialias(<code>true</code> or <code>false</code>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Specify if the stroke should be antialiased. The default is
        <code>true</code>.
      </p>
    </div>

    <div class="sig">
      <h3 id="stroke_dasharray">stroke_dasharray</h3>

      <p><span class="arg">draw</span>.stroke_dasharray(<span class="arg">x1</span>,...,<span class="arg">xn</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Describe a pattern of dashes to be used when stroking paths. The arguments are a list of pixel widths of alternating dashes and gaps.</p>

      <h4>Arguments</h4>

      <p>
        The first argument is the width of the first dash. The second is the width of the gap following the first dash. The third argument is another dash
        width, followed by another gap width, etc. If you specify an odd number of arguments, the arguments are repeated to produce an even number. All
        arguments must be &gt; 0.
      </p>

      <p>
        To produce a solid stroke, specify no arguments, i.e.
        <code>stroke_dasharray()</code>
      </p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>
        <a href="javascript:popup('stroke_dasharray.rb.html'"
          ><img src="ex/stroke_dasharray.gif" alt="stroke_dasharray example" title="Click to see the example script"
        /></a>
      </p>

      <h4>See also</h4>

      <p><a href="#stroke_dashoffset">stroke_dashoffset</a></p>
    </div>

    <div class="sig">
      <h3 id="stroke_dashoffset">stroke_dashoffset</h3>

      <p><span class="arg">draw</span>.stroke_dashoffset(<span class="arg">integer</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify the initial distance into the dash pattern.</p>

      <h4>Arguments</h4>

      <p>The initial distance into the dash pattern. The units are pixels.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>
      See <a href="#stroke_dasharray">stroke_dasharray</a>.
    </div>

    <div class="sig">
      <h3 id="stroke_linecap">stroke_linecap</h3>

      <p><span class="arg">draw</span>.stroke_linecap(<span class="arg">string</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify how the line ends should be drawn.</p>

      <h4>Arguments</h4>

      <p>One of "butt", "round", or "square".</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>
        The following example is from the
        <a href="https://www.w3.org/TR/SVG/painting.html#StrokeProperties">Stroke Properties</a>
        section of the
        <cite>Scalable Vector Graphics (SVG) 1.1 Specification</cite>.
      </p>

      <p>
        <a href="javascript:popup('stroke_linecap.rb.html')"
          ><img src="ex/stroke_linecap.gif" alt="stroke_linecap example" title="Click to see the example script"
        /></a>
      </p>
    </div>

    <div class="sig">
      <h3 id="stroke_linejoin">stroke_linejoin</h3>

      <p><span class="arg">draw</span>.stroke_linejoin(<span class="arg">string</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify how corners are drawn.</p>

      <h4>Arguments</h4>

      <p>One of "miter", "round", or "bevel".</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>
        The following example is from the
        <a href="https://www.w3.org/TR/SVG/painting.html#StrokeProperties">Stroke Properties</a>
        section of the
        <cite>Scalable Vector Graphics (SVG) 1.0 Specification</cite>.
      </p>

      <p>
        <a href="javascript:popup('stroke_linejoin.rb.html')"
          ><img src="ex/stroke_linejoin.gif" alt="stroke_linejoin example" title="Click to see the example script"
        /></a>
      </p>

      <h4>See also</h4>
      <a href="#stroke_miterlimit">stroke_miterlimit</a>
    </div>

    <div class="sig">
      <h3 id="stroke_miterlimit">stroke_miterlimit</h3>

      <p><span class="arg">draw</span>.stroke_miterlimit(<span class="arg">float</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Specify a constraint on the length of the "miter" formed by two lines meeting at an angle. If the angle if very sharp, the miter could be very long
        relative to the line thickness. The miter limit is a limit on the ratio of the miter length to the line width.
      </p>

      <h4>Arguments</h4>

      <p>A number &gt;= 1. The limit on the ratio of the miter length to the line width.</p>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="stroke_opacity">stroke_opacity</h3>

      <p><span class="arg">draw</span>.stroke_opacity(<span class="arg">float</span> or <span class="arg">string</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify the stroke opacity.</p>

      <h4>Arguments</h4>

      <p>A number between 0 and 1, inclusive, or a percentage represented as a string, i.e. '30%'. The argument 0.3 is the same as '30%'.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>
      <pre>
draw.stroke_opacity(0.4)
draw.stroke_opacity('40%')
</pre
      >

      <h4>See also</h4>
      <a href="#fill_opacity">fill_opacity</a>,
      <a href="#opacity">opacity</a>
    </div>

    <div class="sig">
      <h3 id="stroke_width">stroke_width</h3>

      <p><span class="arg">draw</span>.stroke_width(<span class="arg">integer</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify the stroke width in pixels. The default is 1.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>
        <a href="javascript:popup('stroke_width.rb.html')"
          ><img src="ex/stroke_width.gif" alt="stroke_width example" title="Click to see the example script"
        /></a>
      </p>
    </div>

    <div class="sig">
      <h3 id="text">text</h3>

      <p><span class="arg">draw</span>.text(<span class="arg">x</span>,<span class="arg">y</span>, <span class="arg">text</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Draw text at the location specified by (<span class="arg">x</span>,<span class="arg">y</span>). Use <a href="#gravity">gravity</a> to position
        <span class="arg">text</span> relative to (<span class="arg">x</span>, <span class="arg">y</span>). Specify the font appearance with the
        <a href="#font">font</a>, <a href="#font_family">font_family</a>, <a href="#font_stretch">font_stretch</a>, <a href="#font_style">font_style</a>, and
        <a href="#font_weight">font_weight</a> methods. Specify the text attributes with the <a href="#text_align">text_align</a>,
        <a href="#text_anchor">text_anchor</a>, <a href="#text_antialias">text_antialias</a>, and <a href="#text_undercolor">text_undercolor</a> methods.
      </p>

      <p>
        Generally it is a good idea to surround the text string with quotes (""), apostrophes (''), or braces ({}). If the text string starts with a digit or
        contains an embedded blank, quote, or apostrophe, you must do this. ImageMagick removes these characters before drawing the text. You can also escape a
        blank, quote, or apostrophe by preceding it with a backslash ("\"). To include a backslash in the text, use two consecutive backslashes. To include a
        '%' in the text, use '%%'. See the examples below.
      </p>

      <h4>Arguments</h4>

      <dl>
        <dt>x, y</dt>

        <dd>The text position, influenced by <a href="#gravity">gravity</a>.</dd>

        <dt>text</dt>

        <dd>The text.</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Quoting examples</h4>

      <p>The text to the right of &raquo; is the text that will be drawn.</p>
      <pre>
gc.text(10,10, '"Hello there!"') &raquo; Hello there!
gc.text(10,10, "'What\'s up?'") &raquo; What's up?
gc.text(10,10, %q/"What's up?"/) &raquo; What's up?
gc.text(10,10, %q/{"What's up?"}/) &raquo; "What's up?"
</pre
      >

      <h4>Example</h4>

      <p>
        <a href="javascript:popup('text.rb.html')"><img src="ex/text.gif" alt="text example" title="Click to see the example script" /></a>
      </p>

      <h4>See also</h4>
      <a href="#annotate">annotate</a>
    </div>

    <div class="sig">
      <h3 id="text_align">text_align</h3>

      <p><span class="arg">draw</span>.text_align(<span class="arg">alignment</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Align text relative to the starting point.</p>

      <h4>Arguments</h4>

      <p>An <a href="constants.html#AlignType">AlignType</a> constant.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>
        <a href="javascript:popup('text_align.rb.html')"><img src="ex/text_align.gif" alt="text_align example" title="Click to see the example script" /></a>
      </p>
    </div>

    <div class="sig">
      <h3 id="text_anchor">text_anchor</h3>

      <p><span class="arg">draw</span>.text_anchor(<span class="arg">anchor</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Align text relative to the starting point. This is the SVG 1.1 equivalent to <a href="#text_align">text_align</a>.</p>

      <h4>Arguments</h4>

      <p>One of the constants <code>StartAnchor</code>, <code>MiddleAnchor</code>, or <code>EndAnchor</code>.</p>

      <h4>Returns</h4>

      <p>self</p>
    </div>

    <div class="sig">
      <h3 id="text_antialias">text_antialias</h3>

      <p><span class="arg">draw</span>.text_antialias(<code>true</code> or <code>false</code>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify if the text is to be antialiased.</p>

      <h4>Arguments</h4>

      <p>Either <code>true</code> or <code>false</code>. The default is <code>true</code>.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>The character on the left is not antialiased. The character on the right is antialiased.</p>
      <a href="javascript:popup('text_antialias.rb.html')"
        ><img src="ex/text_antialias.gif" alt="text_antialias example" title="Click to see the example script"
      /></a>

      <h4>See also</h4>
      <a href="#stroke_antialias">stroke_antialias</a>
    </div>

    <div class="sig">
      <h3 id="text_undercolor">text_undercolor</h3>

      <p><span class="arg">draw</span>.text_undercolor(<span class="arg">string</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>The color to draw underneath text. The default is transparent.</p>

      <h4>Arguments</h4>

      <p>A color name.</p>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p>
        <a href="javascript:popup('text_undercolor.rb.html')"
          ><img src="ex/text_undercolor.gif" alt="text_undercolor example" title="Click to see the example script"
        /></a>
      </p>
    </div>

    <div class="sig">
      <h3 id="translate">translate</h3>

      <p><span class="arg">draw</span>.translate(<span class="arg">tx</span>, <span class="arg">ty</span>) -&gt; <em>self</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specify a translation operation on the coordinate space.</p>

      <h4>Arguments</h4>

      <dl>
        <dt>tx, ty</dt>

        <dd>The amount of translation in the x and y directions.</dd>
      </dl>

      <h4>Returns</h4>

      <p>self</p>

      <h4>Example</h4>

      <p><code>gc.translate(125, 125)</code></p>

      <p>
        <a href="javascript:popup('translate.rb.html')"><img src="ex/translate.gif" alt="translate example" title="Click to see the example script" /></a>
      </p>

      <h4>See also</h4>

      <p><a href="#affine">affine</a></p>
    </div>

    <h2 class="methods" id="attributes">annotate attributes</h2>

    <div class="sig">
      <h3 id="affine_eq">affine=</h3>

      <p><span class="arg">draw</span>.affine = <em>matrix</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>The transformation matrix. The default is the null transformation.</p>

      <h4>Argument</h4>

      <p>An <a href="struct.html#AffineMatrix">AffineMatrix</a>.</p>
    </div>

    <div class="sig">
      <h3 id="align_eq">align=</h3>

      <p><span class="arg">draw</span>.align = <em>alignment</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>The text alignment. The default is <code>LeftAlign</code>.</p>

      <h4>Argument</h4>

      <p>A <a href="constants.html#AlignType">AlignType</a> constant.</p>
    </div>

    <div class="sig">
      <h3 id="decorate_eq">decorate=</h3>

      <p><span class="arg">draw</span>.decorate = <em>decoration</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>The text decoration. The default is <code>NoDecorationType</code>.</p>

      <h4>Argument</h4>

      <p>A <a href="constants.html#DecorationType">DecorationType</a> constant.</p>
    </div>

    <div class="sig">
      <h3 id="density_eq">density=</h3>

      <p><span class="arg">draw</span>.density = <em>string</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>The text density in the x and y directions. The default is "72x72".</p>
    </div>

    <div class="sig">
      <h3 id="encoding_eq">encoding=</h3>

      <p><span class="arg">draw</span>.encoding = <em>string</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>The text encoding.</p>

      <h4>Argument</h4>

      <p>See the ImageMagick documentation for the <code>-encoding</code> option to the <code>mogrify</code> command.</p>
    </div>

    <div class="sig">
      <h3 id="fill_eq">fill=</h3>

      <p><span class="arg">draw</span>.fill = <em>string</em> or <em>pixel</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>
      The fill color. The default is "black".

      <h4>Argument</h4>

      <p>May be a <a href="imusage.html#color_names">color name</a> or a <a href="struct.html#Pixel">Pixel</a> object.</p>
    </div>

    <div class="sig">
      <h3 id="fill_pattern_eq">fill_pattern=</h3>

      <p><span class="arg">draw</span>.fill_pattern = <em>image</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>
      Specify an image to use for the fill.

      <h4>Argument</h4>

      <p>An image.</p>

      <h4>Example</h4>

      <p>
        <a href="javascript:popup('fill_pattern.rb.html')" title="Click to see the example script"
          ><img src="ex/fill_pattern.gif" alt="fill_pattern and stroke_pattern example"
        /></a>
      </p>
    </div>

    <div class="sig">
      <h3 id="font_eq">font=</h3>

      <p><span class="arg">draw</span>.font = <em>string</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        The font name. The default is "Helvetica". See
        <a href="#font">font</a> for more information about font names.
      </p>
    </div>

    <div class="sig">
      <h3 id="font_family_eq">font_family=</h3>

      <p><span class="arg">draw</span>.font_family = <em>string</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>The font family name. For example, "arial" or "helvetica".</p>
    </div>

    <div class="sig">
      <h3 id="font_stretch_eq">font_stretch=</h3>

      <p><span class="arg">draw</span>.font_stretch = <em>stretch</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>The font stretch.</p>

      <h4>Argument</h4>
      A <a href="constants.html#StretchType">StretchType</a> constant.
    </div>

    <div class="sig">
      <h3 id="font_style_eq">font_style=</h3>

      <p><span class="arg">draw</span>.font_style = <em>style</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>The font style.</p>

      <h4>Argument</h4>

      <p>A <a href="constants.html#StyleType">StyleType</a> constant.</p>
    </div>

    <div class="sig">
      <h3 id="font_weight_eq">font_weight=</h3>

      <p><span class="arg">draw</span>.font_weight = <em>weight</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>The font weight.</p>

      <h4>Arguments</h4>

      <p>A <a href="constants.html#WeightType">WeightType</a> constant or one of the numbers 100, 200, 300, 400, 500, 600, 700, 800, or 900.</p>
    </div>

    <div class="sig">
      <h3 id="gravity_eq">gravity=</h3>

      <p><span class="arg">draw</span>.gravity = <em>gravity</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Specifies how to orient text with respect to the text's origin.</p>

      <h4>Arguments</h4>

      <p>A <a href="constants.html#GravityType">GravityType</a> constant.</p>
    </div>

    <div class="sig">
      <h3 id="interline_spacing_eq">interline_spacing=</h3>

      <p><span class="arg">draw</span>.interline_spacing = <em>space</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Modifies the space between lines.</p>

      <h4>Arguments</h4>

      <p>A numeric value. May be positive or negative.</p>

      <h4>Notes</h4>

      <p>Available in ImageMagick 6.5.5-8.</p>
    </div>

    <div class="sig">
      <h3 id="interword_spacing_eq">interword_spacing=</h3>

      <p><span class="arg">draw</span>.interword_spacing = <em>space</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Modifies the space between two words.</p>

      <h4>Arguments</h4>

      <p>A numeric value. May be positive or negative.</p>

      <h4>Notes</h4>

      <p>Available in ImageMagick 6.4.8-0.</p>
    </div>

    <div class="sig">
      <h3 id="kerning_eq">kerning=</h3>

      <p><span class="arg">draw</span>.kerning = <em>space</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Modifies the space between two letters.</p>

      <h4>Arguments</h4>

      <p>A numeric value. May be positive or negative.</p>

      <h4>Notes</h4>

      <p>Available in ImageMagick 6.4.7-8.</p>
    </div>

    <div class="sig">
      <h3 id="pointsize_eq">pointsize=</h3>

      <p><span class="arg">draw</span>.pointsize = <em>integer</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>The font size in points. The default is 12.</p>
    </div>

    <div class="sig">
      <h3 id="rotation_eq">rotation=</h3>

      <p><span class="arg">draw</span>.rotation = <em>number</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Apply rotation to text. The default is no rotation.</p>

      <h4>Arguments</h4>

      <p>The amount of rotation in degrees.</p>
    </div>

    <div class="sig">
      <h3 id="stroke_eq">stroke=</h3>

      <p><span class="arg">draw</span>.stroke = <em>string</em> or <em>pixel</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>The stroke color. This is the color used to outline the text. The default is "black".</p>

      <h4>Arguments</h4>
      A <a href="imusage.html#color_names">color name</a> or <a href="struct.html#Pixel">Pixel</a> object.
    </div>

    <div class="sig">
      <h3 id="stroke_pattern_eq">stroke_pattern=</h3>

      <p><span class="arg">draw</span>.stroke_pattern = <em>image</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>
      Specify an image to use for the stroke.

      <h4>Argument</h4>

      <p>An image.</p>

      <h4>Example</h4>

      <p>See <a href="#fill_pattern_eq">fill_pattern</a></p>
    </div>

    <div class="sig">
      <h3 id="stroke_width_eq">stroke_width=</h3>

      <p><span class="arg">draw</span>.stroke = <em>integer</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>The stroke width in pixels. The default is 1.</p>
    </div>

    <div class="sig">
      <h3 id="text_antialias_eq">text_antialias=</h3>

      <p>
        <span class="arg">draw</span>.text_antialias =
        <em><code>true</code> or <code>false</code></em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>
        Whether the text is antialiased or not. The default is
        <code>true</code>.
      </p>
    </div>

    <div class="sig">
      <h3 id="tile_eq">tile=</h3>

      <p><span class="arg">draw</span>.tile = <em>image</em></p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>Tile image when filling a graphic primitive.</p>

      <h4>Arguments</h4>

      <p>An image</p>
    </div>

    <div class="sig">
      <h3 id="undercolor_eq">undercolor=</h3>

      <p>
        <span class="arg">draw</span>.undercolor = <em>string</em> or
        <em>pixel</em>
      </p>
    </div>

    <div class="desc">
      <h4>Description</h4>

      <p>If set, causes the text to be drawn over a box of the specified color.</p>

      <h4>Arguments</h4>
      A <a href="imusage.html#color_names">color name</a> or a <a href="struct.html#Pixel">Pixel</a> object.
    </div>

    <p class="spacer">&nbsp;</p>

    <div class="nav">&laquo;&nbsp;<a href="image3.html">Prev</a> | <a href="index.html">Contents</a> | <a href="struct.html">Next</a>&nbsp;&raquo;</div>
  </body>
</html>
